<template>
  <div class="bill">
    <h2 class="bill-title">
      消费记录
      <span class="number">目前共 <b>{{ total }}</b>条记录 </span>
      <span class="total">消费金额 <b>¥{{ totalPaid }}</b> </span>
      <span class="info">一份付出将有十分回报</span>
    </h2>

    <div class="bill-list">
      <el-table :data="billList">
        <el-table-column label="订单编号" prop="orderId" width="150" sortable/>
        <el-table-column label="课程名称" prop="courseName" show-overflow-tooltip />
        <el-table-column label="支付时间" prop="paytime" width="150" sortable/>
        <el-table-column label="消费金额" prop="paid" width="100" sortable align="center" />
        <el-table-column label="支付方式" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.paid === 0 ? '免费课程' : '支付宝' }}
          </template>
        </el-table-column>
        <el-table-column label="支付结果" width="100" align="center">
          {{ `已支付`}}
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
              :current-page="page"
              :page-size="limit"
              :total="total"
              style="padding: 30px 0; text-align: center;"
              layout="total, prev, pager, next, jumper"
              @current-change="fetchData"
      />
    </div>
  </div>
</template>
<script>
import { getBillPageList } from '@/api/order';
import { mapGetters } from 'vuex';

export default {
  data () {
    return {
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
      totalPaid: 0, // 总消费
      billList: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData(page = 1){
      // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
      // 解决分页无效问题
      this.page = page

      // 获取用户消费记录数据
      getBillPageList(this.page,this.limit,this.userId).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.billList = result.data.rows
          this.total = result.data.total
          this.totalPaid = result.data.totalPaid
        }
      })
    },
  },
  computed: {
    ...mapGetters({
      'userId': 'id'
    })
  },
}
</script>
<style lang="stylus" scoped>
  .bill
    .bill-title
      margin-bottom: 15px;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      line-height: 48px;
      & > span
        margin-right: 20px;
        font-size: 12px;
        line-height: 24px;
        color: #4d555d;
        &:first-child
          margin-left: 24px;
          padding-left: 24px;
          border-left: 1px solid #d9dde1;
        & > b
          padding: 0 5px;
          color: #f01414;
    .bill-list
      padding: 20px;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 4px 8px 2px rgba(0,0,0,0.1);
      >>> .el-table
        font-size: 12px;
        &::before
          height: 0;
        td
          border-bottom: none;
        th
          border-color: #b7bbbf;
          .cell
            color: #333;
            font-weight: 700;
</style>
